<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可拖动的表格</title>
	</head>
	<style>
		.row{
			width: 100%;
			display: flex;
		}
		.md_2{
			width: 20%;
		}
		.md_8{
			width: 80%;
		}
		.kt_{
			width: 100px;
			height: 100px;
			background: red;
			margin: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.table{
			width: 100%;
		}
		.bordered-table {
		  border-collapse: collapse;  /* 设置边框合并 */
		}
		
		.bordered-table th, .bordered-table td {
		  border: 1px solid black;   /* 设置边框样式，可根据需要调整颜色和宽度 */
		  padding: 8px;   /* 可选，设置单元格内边距 */
		}
		.bordered-table td {
			width: 100px;
			height: 100px;
		}
	</style>
	<body>
		<div class="main_container">
			<div class="row">
				<div class="md_2">
					<div>
						<div class="kt_" draggable="true" >
							节点1
						</div>
						<div class="kt_" draggable="true" >
							节点2
						</div>
					</div>
				</div>
				<div class="md_8">
					<table class="bordered-table">
						<thead>
							<tr>
								<th>节点1</th>
								<th>节点2</th>
								<th>节点3</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>
					</table>
					
					<div style="height: 100px;">
						
					</div>
					
					<table class="bordered-table">
						<tbody>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<script>
			const draggable_container = document.querySelector('.main_container');
			// 被拖拉节点
			var dragged;
			//开始阶段
			draggable_container.addEventListener('dragstart',function (event) {
				dragged = event.target;
				var node=event.target.parentNode
				if(node.nodeName=='TD'){
					event.dataTransfer.effectAllowed = 'move';
				}else{
					event.dataTransfer.effectAllowed = 'copy';
				}
			})
			
			//覆盖当前元素上面
			draggable_container.addEventListener('dragover', function (event) {
			  // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
			  event.preventDefault();
			  console.log('在上面',event.target);
			});
			
			//当拖动元素进入有效的拖放目标时触发
			draggable_container.addEventListener('dragenter', function (event) {
			  // 目标节点的背景色变紫色
			  // 由于该事件会冒泡，所以要过滤节点
				console.log('dragenter',event.target)
				
			});
			
		
			
			//离开
			draggable_container.addEventListener('dragleave', function( event ) {
			  // 目标节点的背景色恢复原样
			  console.log(event.target,'离开')
			});
			
			//最后放置
			draggable_container.addEventListener('drop', function( event ) {
			  // 防止事件默认行为（比如某些元素节点上可以打开链接），
			  event.preventDefault();
			  //当前的事件
			  if(event.dataTransfer.effectAllowed==='move'){
				  if(event.target.firstChild!==null){
					  return;
				  }
				  //移除原来的节点
				  removeChildRen(dragged.parentNode);
			  }
			  if (event.target.nodeName === 'TD') {	
				 var copyelement=dragged.cloneNode(true);
				 event.target.appendChild(copyelement);
			  }
			});
			
			//放置完成
			draggable_container.addEventListener('dragend', function( event ) {
				console.log(event.target,'放置完成')
			})
			
			//清空子节点
			function removeChildRen(target){
				while (target.firstChild) {
				  target.removeChild(target.firstChild);
				}
			}
			
			
			
		</script>
	</body>
</html>